html[data-theme='light'] .navigator {
  opacity: 0.6
}
.home {
  display: flex
  height: 100vh
  width: 100%
  flex-flow: column
  overflow: auto
  // background #12111D
  // background: var(--home-bg)
  .header {
    display: flex
    justify-content: space-between
    height: 80px
    line-height: 80px
    min-height: 80px
    padding-right: 20px
    .tools-btn {
      color: #fff
    }
    .login-btn {
      border: none
      background: var(--login-btn-bg)
      color: #1A2637
      // &:hover {
      // color: #fff
      // background: linear-gradient(120deg, #5b97ff 30%, #62e3ff 60%, #64f3fe 100%)
      // }
    }
    .banner {
      display: flex
      .logo {
        // padding 5px
        cursor: pointer
        .el-image {
          // width 48px
          height: 48px
        }
      }
      .title {
        display: flex
        color: #ffffff
        font-size: 20px
        padding: 0 10px
      }
    }
    .navbar {
      display: flex
      flex-flow: row
      .kefu {
        color: var(--kefu-text-color)
      }
      .link-button {
        margin-right: 15px
        color: #e1e1e1
        padding: 0 10px
        &:hover {
          background-color: #414141
        }
        .iconfont {
          font-size: 24px
        }
      }
      .user-info {
        // width: 100%
        padding: 5px 0
        .el-dropdown-link {
          width: 100%
          cursor: pointer
          display: flex
          .el-image {
            width: 36px
            height: 36px
            border-radius: 50%
          }
          .el-icon {
            color: #cccccc
            line-height: 24px
          }
        }
      }
    }
  }
  .main {
    width: 100%
    display: flex
    flex-flow: row
    height: 100%
    .navigator {
      height: 100%
      width: 220px
      padding: 10px
      overflow-y: auto
      overflow-x: hidden
      // border-right: 1px solid #3c3c3c
      background: var(--navigator-bg)
      .nav-items {
        margin-top: 10px
        padding: 0 5px
        h4 {
          color: var(--navigator-title-text)
          font-size: 12px
          font-weight: normal
        }
        li {
          position: relative
          margin: 15px 0
          padding: 8px 12px
          border-radius: 18px
          &:hover, &.active {
            border: none
            background: var(--nav-active-bg)
          }
          &:hover span, &:hover i, &.active span, &.active i {
            width: fit-content
            background-clip: text !important
            -webkit-text-fill-color: transparent !important
            background: var(--nav-text-active)
          }
          &.active .circle {
            opacity: 1
          }
          span, i {
            font-size: 14px
            color: var(--nav-text)
          }
          .circle {
            opacity: 0
            position: absolute
            left: -4px
            width: 8px
            height: 8px
            background: var(--liner)
            border-radius: 5px 5px 5px 5px
          }
        }
        .line:not(:last-child) {
          width: 100%
          height: 1px
          background: var(--nav-line-bg)
          margin: 25px 0
        }
      }
    }
    .content {
      width: 100%
      overflow: auto
      box-sizing: border-box
    }
  }
}
.el-popper {
  .more-menus {
    li {
      padding: 10px 15px
      cursor: pointer
      border-radius: 5px
      margin: 5px 0
      .el-image {
        position: relative
        top: 5px
        right: 5px
      }
      &:hover {
        background-color: #f1f1f1
      }
    }
    li.active {
      background-color: #f1f1f1
    }
  }
  .user-info-menu {
    li {
      a {
        width: 100%
        justify-content: left
        &:hover {
          text-decoration: none !important
          color: var(--el-primary-text-color)
        }
      }
    }
  }
}